<template>
  可视化 ———— 设置 表单
  <el-button @click="setMeta">设置表单属性</el-button><br>
  <hr>
  <el-row>
    <el-col :span="2">设置列数：</el-col>
    <el-col :span="12">
      <el-slider
        v-model="formMeta.formColCount"
        :min="1"
        :max="8"
      ></el-slider>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="19">
      <component
        :is="dictForm"
        ref="formDom"
        :model="model"
        v-bind="formMeta"
        @click="myClick"
      >
        <template v-slot:text>
          <h1>外部插槽</h1>
        </template>
      </component>
      
    </el-col>
    <el-col :span="4">
      model 值：<br><br>
      <div
        v-for="(item, key, index) in model"
        :key="index"
      >
        {{key}}： {{item}}
      </div>
    </el-col>
  </el-row>

  <help-form v-if="drawerInfo.isLoad"
    :drawerInfo="drawerInfo"
    :meta="formMeta"
    :formDom="formDom"
  >
  </help-form>
  <help-text
    :drawerInfo="formDrawerInfo"
    :meta="textProps"
  >
  </help-text>
</template>

<script>
  import { reactive, nextTick, watch, ref, defineAsyncComponent } from 'vue'
  import { ElButton, ElCol, ElRow, ElLoading, ElSlider } from 'element-plus'
  import { Loading, Connection, Edit, FolderOpened } from '@element-plus/icons'
  import { createModel, lifecycle } from '/nf-ui-core'
  import { helpForm, helpText } from '/nf-meta-help'
  import _formMeta from './form.json'
  // v-form-drag="formMeta"
</script>

<script setup>
  lifecycle('设置表单属性（card）', true)
 
  const props = defineProps({
    moduleId: [Number, String],
    dataId: [Number, String],
    formMetaId: [Number, String],
    actionId: [Number, String],
    type: [Number, String],
    dialogInfo: [Object]
  })

  // 要修改的字段 的 meta
  const textProps = reactive({})

  // 获取表单控件需要的meta
  const formMeta = reactive(_formMeta)
  // 增加 单击事件的响应
  formMeta.domEvents = {}
  formMeta.domEvents.click = (id) => {
    console.log('响应拖拽的单击事件：', id)
    // 删除之前的
    for (const key in textProps) {
      delete textProps[key]
    }
    Object.assign(textProps, formMeta.itemMeta[id])
    formDrawerInfo.isShow = true
  }

  // 加载不同的表单
  const dictForm = ref('nf-form-card')
  watch(formMeta.subs, (subs) => {
    switch(subs.type) {
      case '':
        dictForm.value = 'nf-form'
        break
      case 'card':
        dictForm.value = 'nf-form-card'
        break
      case 'tab':
        dictForm.value = 'nf-form-tab'
        break
      case 'step':
        dictForm.value = 'nf-form-step'
        break
        
    }
  })

  // 表单值写回来
  let timeout = null
  watch(textProps, () => {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      Object.assign(formMeta.itemMeta[textProps.columnId], textProps)
    }, 100)
  })

  // 改为插槽
  // formMeta.itemMeta[101].controlType = 1

  // 根据 meta 创建表单的 model
  const model = createModel(_formMeta.itemMeta, _formMeta.colOrder)

  const loadingInstance1 = ElLoading.service({ fullscreen: true })
  nextTick(() => {
    loadingInstance1.close()
  })

  // 表单的对象
  const formDom = ref(null)
  
  setTimeout(() => {
    // console.log('===22表单dom：', formDom)  
  }, 300)

  // 表单的单击事件
  const myClick = (e) => {
    // console.log('表单单击：', e)
  }

  // 控制 表单 抽屉的展开收拢
  const drawerInfo = reactive({
    isShow: false,
    isLoad: false
  })

  const setMeta = () => {
    drawerInfo.isShow = true
    drawerInfo.isLoad = true
  }

  
  // 控制 字段 抽屉的展开收拢
  const formDrawerInfo = reactive({
    isShow: false
  })
 

</script>